import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useState } from 'react';
import Detail from './mainContent/detail';
import { gateCameraItem, getRecordTable } from './service';
import { DatePicker } from 'antd';
import { RangePickerProps } from 'antd/lib/date-picker';
import moment from 'moment';
import RemoteSelect from '@/components/RemoteSelect';
import { getZoneSelectionList } from '../park-lot/service';

export default () => {
  const [passVisible, setPassVisible] = useState<boolean>();
  const [recordId, setRecordId] = useState<string>();
  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    // Can not select days before today and today
    return current && current > moment().endOf('day');
  };
  const columns: ProColumns<any>[] = [
    {
      title: '记录编号',
      dataIndex: 'id',
      hideInForm: true,
      hideInSearch: false,
    },
    {
      title: '车辆属性',
      dataIndex: 'carAttributes',
      hideInForm: true,
      hideInSearch: false,
      valueEnum: {
        1: '固定车',
        2: '会员车',
        3: '无牌车',
        4: '临时车',
      },
    },
    {
      title: '过车方向',
      dataIndex: 'direction',
      hideInSearch: false,
      valueEnum: {
        1: '入场',
        2: '出场',
      },
    },
    {
      title: '停车场名称',
      dataIndex: 'zoneName',
      hideInSearch: false,
      renderFormItem: () => (
        <RemoteSelect
          getPopupContainer={(triggerNode) => triggerNode.parentElement} // 保证选择菜单不会随着页面滚动
          fieldNames={{ key: 'id', value: 'id', label: 'name' }}
          request={(search) => getZoneSelectionList({ name: search })}
        />
      ),
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      hideInSearch: false,
    },
    {
      title: '车辆颜色',
      dataIndex: 'plateColor',
      hideInSearch: true,
    },
    {
      title: '车辆类型',
      dataIndex: 'carType',
      hideInSearch: false,
      valueEnum: {
        1: '小型车',
        2: '大型车',
        3: '新能源车',
        4: '其他',
      },
    },
    {
      title: '过车时间',
      dataIndex: 'passTime',
      hideInSearch: false,
      renderFormItem: () => {
        return (
          <DatePicker.RangePicker
            showTime
            placeholder={['请选择时间', '请选择时间']}
            disabledDate={disabledDate}
          />
        );
      },
    },
    {
      title: '过车通道',
      dataIndex: 'channelName',
      hideInSearch: false,
      renderFormItem: () => (
        <RemoteSelect
          getPopupContainer={(triggerNode) => triggerNode.parentElement} // 保证选择菜单不会随着页面滚动
          fieldNames={{ key: 'id', value: 'id', label: 'name' }}
          request={async (search) => {
            const res = await gateCameraItem({ name: search });
            return { ...res, data: res.data.list };
          }}
        />
      ),
    },
    {
      title: '放行方式',
      dataIndex: 'releaseMode',
      hideInSearch: false,
      valueEnum: {
        1: '正常放行',
        2: '软件异常放行',
        3: '遥控或遥感放行',
      },
    },
    {
      title: '操作',
      fixed: 'right',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <>
            <a
              onClick={() => {
                setRecordId(record.id);
                setPassVisible(true);
              }}
            >
              详情
            </a>
          </>
        );
      },
    },
  ];
  return (
    <PageContainer>
      <ProTable<any>
        rowKey="parkinglotId"
        columns={columns}
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="-"
        headerTitle="角色列表"
        pagination={{
          size: 'default',
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 10,
        }}
        request={async (param) => {
          const res = await getRecordTable(param);
          return { data: res.data?.list, ...res.data };
        }}
      />
      {passVisible && (
        <Detail
          visible={passVisible}
          onClose={() => {
            setPassVisible(false);
          }}
          id={recordId}
        />
      )}
    </PageContainer>
  );
};
